<template>
  <cube-page type="button-view" title="订单详情">
    <div slot="content">
      <div class="scroll-list-wrap" :style="{'height': getlistHeight}">
        <cube-scroll ref="scroll" :data="tableData" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
          <div class="zcardWrap">
            <div class="zcard" v-for="(v, index) in tableData" :key="index" @click="showPicture(v, index)">
              <div class="zui-flex zcardRow">
                <div class="zlabel">品种名称</div>
                <div class="zdes">{{v.name}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">品种编号</div>
                <div class="zdes">{{v.code}}</div>
              </div>
             
              <div class="zui-flex zcardRow">
                <div class="zlabel">品种单位</div>
                <div class="zdes">{{v.unit}}</div>
              </div>
              <div class="zui-flex zcardRow zcardArrow">
                <div class="zlabel">规格</div>
                <div class="zdes">{{v.specifications}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">发票号</div>
                <div class="zdes">{{v.invoicenumber}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">品种厂地</div>
                <div class="zdes">{{v.factory}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">批号</div>
                <div class="zdes">{{v.batnumber}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">失效日期</div>
                <div class="zdes">{{v.sxdate}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">数量</div>
                <div class="zdes">{{v.num}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">单价</div>
                <div class="zdes">{{v.price | priceFormat(3,'￥',true)}}</div>
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>

      <cube-view></cube-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import {zOrderDetail} from '@/util/api';

export default {
  name: 'Shortage',
  components: {
    CubePage, CubeView
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      showLoading: true,
      tableData: [],
      total: 0,
      start: 1,
      pageSize: 5,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      options: {
        pullDownRefresh: {
          threshold: 60,
          txt: '正在刷新...'
        },
        pullUpLoad: false,
        scrollbar: true,
        click: true,
        tap: true,
        taps: true,
      },
      getlistHeight: this.zutil.getlistHeight(44),
      searchOut: {
        name: '',
      },
      drawerShow: false,
      hospitalList: [],
      datePicker: null,
      curOrderId: ''
    }
  },
  created () {

  },
  mounted() {
    this.curOrderId = this.$route.params.sid;
    this.fetchList();
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    resetPage () {
      this.tableData = [];
      this.total = 0;
      this.start = 1;
    },
    onPullingDown() {
      // 下拉刷新
      this.resetPage();
      this.fetchList();
    },
    onPullingUp() {
      this.$refs.scroll.forceUpdate();
      return;
      // 上拉加载更多
      if(this.total && this.tableData.length < this.total){
        this.fetchList();
      }else if(this.total && this.tableData.length == this.total){
        this.$refs.scroll.forceUpdate();
        return;
      }
    },
    searchData () {
      this.start = 1;
      this.fetchList();
    },
    async fetchList () {
      let tbl_param = {
        page: this.start,
        pagesize: this.pageSize,
        curOrderId: this.curOrderId
      }
      this.zutil.deepClone(tbl_param, this.searchOut);

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zOrderDetail(tbl_param);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();

      if(res.code == '0000'){
        this.tableData = this.tableData.concat(res.data.list);
        this.total = res.data.total;
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取缺货信息列表失败！"}).show();
        this.$refs.scroll.forceUpdate();
      }
      // 如果微信确实无法触发点击事件，再放开这段代码
      // this.zutil.initBtnsClickEvent(this, '.zuiReplayBtn', this.zreplay);
    },
    zfilterDrawer () {
      this.drawerShow = true;
    },
    drawerToggle () {
      this.drawerShow = !this.drawerShow;
    },
    onHide () {

    },
    changeDrawerShow (state) {
      // 在父页面点击mask关闭页面
      this.drawerShow = state;
    },
    onShow () {

    },
    zreset () {
      this.searchOut = {
        code: '',
        salename: '',
        depart: '',
        hospital: '',
        date: '',
      }
      if(this.datePicker)
        this.datePicker.$updateProps({value: new Date()});
    },
    zsubmit () {
      this.drawerShow = false;
      this.resetPage();
      this.searchData();
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          min: new Date(1949, 0, 1),
          max: new Date(),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.searchOut.date = this.moment(date).format('YYYY-MM-DD');
          }
        })
      }
      this.datePicker.show();
    },
    showPicture (item, index) {
      this.zutil.lStorage.setParam('lst_orderPicture', JSON.stringify(item));
      this.$router.push(`/order/orderList/${this.curCustomId}/orderDetail/${item.id}/orderPicture`);
    }
  }
}
</script>

<style scoped lang="scss">

.fab-main-container {
  /deep/ {
    .fab-item-title {
      font-size: 14px;
      padding: 7px;
      background: #fc9153!important;
      color: #fff!important;
    }
  }
}
.scroll-list-wrap .zcardWrap {
  padding: 0;
  .zcard {
    border-radius: 0;
  }
}
</style>
